<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
   
    var ReactComponent = React.createClass({
      
      getDefaultProps:function(){
        return{
          price:18000
        }
      },
      getInitialState:function(){
        return{
          result:"This is state"
        }
      },
      handlerClick:function(){
        this.setState({result:"This is new state"})
      },
      render:function(){    
        var propsValue = "Hello React";
        console.log(this.props);
        console.log("state:",this.state);
      return (  <div>
                    <h1>React Component</h1>
                    This is props value: {propsValue}
                    <input value={this.props.name}/>
                    <button onClick={this.handlerClick}>Click Btn</button>
                    <input value={this.state.result}/>
                  </div>
               )
      }
    });

    //React data bind用props和state 作为数据绑定的载体
    // 属性传递必须要在组件初始化声明属性-->可以是字符串、对象？
    // 属性传递在组件内部到底如何获取?
    // 采用Key-Value形式，在初始化的时候，属性名称={声明属性}，组件内容获取采用this.props获取
    // 采用{...对象} 不需要使用具体的属性
    var goods = {"name":"Goods name is LV","color":"red"};

    ReactDOM.render( <ReactComponent {...goods}/>, 
      document.getElementById('app'),
      function(){
        console.log('渲染完成啦！！');
      }
    )
    
</script>
</body>
</html>